<template>
    <el-tabs :tab-position="tabPosition" style="height: 100%" class="demo-tabs">
        <el-row style="height: 48%">
            <el-col :span="12" style="height: 100%; padding: 12px">
                <el-card class="box-card" style="height: 100%">
                    <template #header>
                        <div class="card-header">
                            <span>学习</span>
                        </div>
                    </template>
                    <DocItem />
                </el-card>
            </el-col>
            <el-col :span="12" style="height: 100%; padding: 12px">
                <el-card class="box-card" style="height: 100%">
                    <template #header>
                        <div class="card-header">
                            <span>工作</span>
                        </div>
                    </template>
                    <DocItem />
                </el-card>
            </el-col>
        </el-row>
        <el-row style="height: 48%" >
            <el-col :span="12" style="height: 100%; padding: 12px">
                <el-card class="box-card" style="height: 100%">
                    <template #header>
                        <div class="card-header">
                            <span>个人</span>
                        </div>
                    </template>
                    <DocItem />
                </el-card>
            </el-col>
            <el-col :span="12" style="height: 100%; padding: 12px">
                <el-card class="box-card" style="height: 100%">
                    <template #header>
                        <div class="card-header">
                            <span>资料</span>
                        </div>
                    </template>
                    <DocItem />
                </el-card>
            </el-col>
        </el-row>
    </el-tabs>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import DocItem from "@/docs/DocItem.vue";

const tabPosition = ref('left')
</script>
<style>

.el-card{
    --el-card-padding: 0px;
    font-size: 16px;
}

.card-header {
    height: 38px;
    align-content: center;
}

.el-card__body
{
    height: 100%;
}

.demo-tabs > .el-tabs__content {
    padding: 0px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}

.demo-tabs > .el-card__header {
    padding: 0px;
    height: 38px;
    align-content: center;
}

.el-card__header span
{
    line-height: 38px;
    align-content: center;
    padding-left: 12px;
}

.el-tabs--right .el-tabs__content,
.el-tabs--left .el-tabs__content {
    height: 100%;
}
</style>